<!-- 查看评价主页面 只剩下接口没对-->
  <template>
    <h2>审批评价管理</h2>
    <div>
      <!-- 下拉选择 -->
      <el-select v-model="value1" filterable placeholder="满意度" style="margin-left: 10px" @change="change">
        <el-option v-for="item in tableopition1" :key="item" :label="item" :value="item" />
      </el-select>
      <el-select  v-model="value2" filterable placeholder="审批类型" style="margin-left: 10px" @change="change">
        <el-option v-for="item in tableopition2" :key="item" :label="item" :value="item" />
      </el-select>
      <el-select  v-model="value3" filterable placeholder="所属市区" style="margin-left: 10px" @change="change">
        <el-option v-for="item in tableopition3" :key="item" :label="item" :value="item"/>
      </el-select>
      <el-select v-model="value4" filterable  placeholder="处理单位" style="margin-left: 10px" @change="change">
        <el-option v-for="item in tableopition4" :key="item" :label="item.units"  :value="item.units" />
      </el-select>
    </div>
     <!-- 搜索栏 -->
    <div style="margin-top: 30px; margin-left: 10px">
      <div>
        <el-input v-model="input" placeholder="" style="width: 30%" />
        <el-button @click="seacrhs"  round   style="border-radius: 0;background-color: rgb(22, 155, 213);color: white;">搜索</el-button>
      </div>
      <!-- 自定义列表 -->
      <div id="maxbox" ref="myRef">
        <div >
          <span @click="clickplay()">
            自定义列表
          </span>
          <div class="selectbox">
            <input type="checkbox" checked disabled />
            <label>审批主题</label>
          </div>
          <div class="selectbox">
            <input type="checkbox" checked disabled />
            <label>企业名称</label>
          </div>
          <div class="selectbox">
            <input type="checkbox" checked id="pjr" />
            <label>审批类型</label>
          </div>
          <div class="selectbox">
            <input type="checkbox" checked id="pjrsj" />
            <label>审批状态</label>
          </div>
          <div class="selectbox">
            <input type="checkbox" checked disabled/>
            <label>满意度</label>
          </div>
          <div class="selectbox">
            <input type="checkbox" checked disabled/>
            <label>评价时间</label>
          </div>
          <div class="selectbox">
            <input type="checkbox" checked id="ssqs"/>
            <label>所属区市</label>
          </div>
          <div class="selectbox">
            <input type="checkbox"  checked id="spdw"/>
            <label>审批单位</label>
          </div>
          <div class="selectbox">
            <input type="checkbox"  checked id="tjsj"/>
            <label>提交时间</label>
          </div>
          <div class="selectbox">
            <input type="checkbox" checked  disabled/>
            <label>评价人</label>
          </div>
          <div class="selectbox">
            <input type="checkbox" checked id="pjrzw"/>
            <label>评价人职务</label>
          </div>
          <div class="selectbox">
            <input type="checkbox" checked disabled/>
            <label>评价人手机</label>
          </div>
          <div class="selectbox">
            <input type="checkbox" id="gddh"/>
            <label>固定电话</label>
          </div>
        </div>
      </div>
      <el-button id="maxbox2"  @click="exportData" type="success" style="background-color: rgb(22, 155, 213)" >
        导出数据
      </el-button>
    </div>
  
    <div id="maxbox3" style="margin-top: 30px">
      <!-- 表单 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column fixed="left" prop="id4" label="序号" width="80" />
        <el-table-column prop="approvalSubject"  label="审批主题" width="320" />
        <el-table-column prop="name"             label="企业名称" width="160" />
        <el-table-column prop="approvalType"     label="审批类型" v-if="r" width="160" />
        <el-table-column prop="approvalStatus"   label="审批状态" v-if="sj" width="160" />
        <el-table-column prop="satisfaction"     label="满意度" width="160" />
        <el-table-column prop="region"           label="所属市区" v-if="s" width="160" />
        <el-table-column prop="approvalUnit"     label="审批单位" v-if="w" width="160" />
        <el-table-column prop="submissionTime"   label="提交时间" v-if="j" width="160" />
        <el-table-column prop="appraiseTime"     label="评价时间"  width="160" />
        <el-table-column prop="reporter"         label="评价人"  width="160" />
        <el-table-column prop="reporPhoneid"     label="评价人电话"  width="160" />
        <el-table-column prop="reporPhoneid"     label="评价人职务" v-if="zw" width="160" />
        <el-table-column prop="reporPhoneid"     label="固定电话" v-if="dh" width="160" />
        <el-table-column fixed="right"           label="操作" width="100">
          <template #default>
            <el-button link type="primary" size="small" @click="handleClick"
              >查看</el-button
            >
            <el-button link type="primary" size="small">处理</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="page" style="display: flex;justify-content: center;">
      <el-pagination background layout="prev, pager, next" :total="1000" />
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref, onMounted,} from "vue";
  import axios from 'axios'
  import { useRouter } from 'vue-router'
  const router = useRouter();
  /* value1 2 对应v-modole */
  const value1 = ref("");
  const value2 = ref("");
  const value3 = ref("");
  const value4 = ref("");
  const input = ref("");
  /* 导出数据 */
  const exportData = function () {};
  
  /* 复选框 */
  const myRef = ref();
  let s:any=ref("true");
  let w:any=ref("true");
  let j:any=ref("true");
  let zw:any=ref("true");
  let r:any=ref("true");
  let sj:any=ref("true");
  let dh:any=ref("true");
  //自定义列表
  const clickplay = function () {
    if (myRef.value.style.height == '36px' || myRef.value.style.height=='') {
      myRef.value.style.height = "447px"
    }else if(myRef.value.style.height = "447px"){
      myRef.value.style.height = "36px";
    } ;  
      const ssqs:any=document.getElementById("ssqs");
      s.value=ssqs.checked;
      const spdw:any=document.getElementById("spdw");
      w.value=spdw.checked;
      const tjsj:any=document.getElementById("tjsj");
      j.value=tjsj.checked;
      
      const pjrzw:any=document.getElementById("pjrzw");
      zw.value=pjrzw.checked;
      const pjr:any=document.getElementById("pjr");
      r.value=pjr.checked;
      const pjrsj:any=document.getElementById("pjrsj");
      sj.value=pjrsj.checked;
      const gddh:any=document.getElementById("gddh");
      dh.value=gddh.checked;
  };
 //这个查看是跳转评价详情页
  const handleClick = (scope:any) => {
   let id=scope.row.id
   router.push({path:"/evaluate",query:{id:id}})
  
  };
 const aaa = (aa: any) => {
 var date = new Date(aa); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
 var Y = date.getFullYear() + '/';
 var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/';
 var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
 var h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':';
 var m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':';
 var s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
 return Y + M + D + h + m + s;
 }
const tableopition1:any=ref([])  //动态下拉框
const tableopition2:any=ref([])
const tableopition3:any=ref([])
const tableopition4:any=ref([])
const tableData:any= ref([])//主数据
// 下拉框搜索
const change=(()=>{
     console.log(value1.value);
     console.log(value2.value);
     console.log(value3.value);
     console.log(value4.value);
     axios({    
       method: 'post',
       url: 'http://172.16.123.161:8080/approval_checklist/findApprovalChecklistByCondition',
       params: {
       approvalStatus:value1.value,
       approvalType:value2.value,
       region:value3.value,
       approvalUnit:value4.value,
       currentPage:1,
       pageSize:10   
       }
       }).then((res:any) => {
        tableData.value=res.data.data
        for(let i=0;i<tableData.value.length;i++){
          tableData.value[i].approvalTime=aaa(tableData.value[0].approvalTime)
          tableData.value[i].submissionTime=aaa(tableData.value[0].submissionTime)
        }
        })
 })
//输入框搜索
const seacrhs=function(){ 
     axios({    
       method: 'post',
       url: 'http://172.16.123.161:8080/approval_checklist/findApprovalChecklistByCondition',
       params: {
        name:input.value,
        currentPage:1,
        pageSize:10    
       }
       }).then((res:any) => {
        console.log(res);
        tableData.value=res.data.data
        for(let i=0;i<tableData.value.length;i++){
          tableData.value[i].approvalTime=aaa(tableData.value[0].approvalTime)
          tableData.value[i].submissionTime=aaa(tableData.value[0].submissionTime)
        }
      })
    }  
//-----------------------------------------------------onMounted 页面加载前，发起请求渲染页面数据
  onMounted(()=>{
                 axios({
                  method: 'post',
                  url: 'http://1.14.73.59:8080/approval_checklist/findApprovalAppraise',
                  params: {
                    currentPage:5,
                    pageSize:5    
                  }
                }).then((res:any) => {
                tableData.value=res.data.data
                //这个循环是转换时间格式
                  for(let i=0;i<tableData.value.length;i++){
                    tableData.value[i].approvalTime=aaa(tableData.value[0].approvalTime)
                    tableData.value[i].submissionTime=aaa(tableData.value[0].submissionTime)
                    tableopition1.value.push(tableData.value[i].region) //所属市区
                    tableopition2.value.push(tableData.value[i].approvalStatus)//审批状态
                    tableopition3.value.push(tableData.value[i].approvalUnit)//审批单位
                    tableopition4.value.push(tableData.value[i].approvalType)//审批类型
                     removeDuplicate(tableopition1.value) 
                     removeDuplicate(tableopition2.value) //去重，上面const的值都已经去重了
                     removeDuplicate(tableopition3.value)
                     removeDuplicate(tableopition4.value)
                     function removeDuplicate(arr:any) {
                      let len = arr.length
                     for (let i = 0; i < len; i++) {
                     for (let j = i + 1; j < len; j++) {
                        if (arr[i] === arr[j]) {
                         arr.splice(j, 1)
                           len-- // 减少循环次数提高性能
                           j-- // 保证j的值自加后不变
                        }
                       }
                      }
                       return arr
                 }
                  }
              })
          })
  
   
  </script>
  
  <style scoped>
  #maxbox {
    position: absolute;
    width: 124px;
    height: 36px;
    right: 600px;
    top: 130px;
    z-index: 999;
    text-align: center;
    line-height: 40px;
    background-color: rgb(22, 155, 213);
    overflow: hidden;
    transition: all 0.2s linear;
    border-radius: 3px;
  }
  #maxbox div {
    width: 123px;
    color: white;
    font-size: 14px;
  }
  #maxbox div div{
    height: 30px;
    width: 122px;
  }
  #maxbox2 {
    width: 120px;
    height: 36px;
    background-color: rgb(22, 155, 213);
    text-align: center;
    line-height: 36px;
    position: absolute;
    right: 400px;
    top: 130px;
  }
  
  /* #clickbox {
    width: 120px;
    height: 36px;
    background-color: rgb(22, 155, 213);
    text-align: center;
    line-height: 36px;
  }
  #checkbox {
    overflow: hidden;
    height: 0px;
  } */
  .selectbox {
    width: 120px;
    height: 20px;
    border: 1px solid rgb(104, 100, 100);
    background-color: rgb(124, 122, 122);
    font-size: 14px;
  }
  .selectbox input{
    margin-left: -10px;
  }
  .selectbox label{
    color:white;
    font-size: 6px;
  }
  </style>